<script setup>
import { FolderOpened } from "@element-plus/icons-vue"
const props = defineProps(["noteFiles"])

const path = f => BucketURL + '/note-files/' + f

</script>

<template>
  <a v-for="f of noteFiles" :key="f" class="item" :href="path(f)" target="_black">
    <FolderOpened style="width: 16px; height: 16px;" /> {{ f }}
  </a>
</template>

<style scoped lang="less">
.item {
  display: block;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  background: var(--model-back-color);
  padding: 2px 10px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  * {
    vertical-align: middle;
  }

  &:hover {
    background: var(--model-back-color-hover);
  }
}
</style>